<template>
  <Form
    ref="form"
    :model="data"
    :rules="rules"
    :label-width="labelWidth"
    :label-position="labelPosition"
  >
    <Row :gutter="24" type="flex">
      <Col v-bind="grid">
        <Input
          v-model="data.name"
          placeholder="请输入患者姓名/手机号"
          element-id="name"
          clearable
          @on-blur="onSearchItemss"
          @on-enter="onSearchItems"
          @on-clear="onSearchItem"
        />
      </Col>
      <Col v-bind="grid">
        <FormItem label="就诊类型" prop="disease" label-for="disease">
          <Select
            v-model="data.diagnosis"
            placeholder="就诊类型"
            element-id="diagnosis"
            clearable
            transfer
            @on-change="onSearchItem"
            @on-clear="onSearchItem"
          >
            <Option
              v-for="items in types"
              :key="'type' + items.id"
              :value="items.id"
              :disabled="+items.status === 0"
              >{{ items.name }}</Option
            >
          </Select>
        </FormItem>
      </Col>
      <Col span="8">
        <FormItem label="标签" prop="label" label-for="label">
          <Select
            v-model="data.label"
            :transfer="true"
            filterable
            multiple
            @on-change="onSearchItem"
            @on-clear="onSearchItem"
          >
            <OptionGroup
              v-for="(items, index) in labels"
              :key="'group' + index"
              :label="items.name"
            >
              <Option
                v-for="(item, inum) in items.children"
                :value="item.id"
                :key="'label' + inum"
                :disabled="+item.status === 0"
                >{{ item.name }}</Option
              >
            </OptionGroup>
          </Select>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      grid: {
        xl: 4,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      data: {
        name: "",
        diagnosis: "",
        label: [],
      },
      rules: {},
    };
  },
  props: ["labels", "members", "types"],
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 80;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  methods: {
    onSearchItem(val, v) {
      this.$emit("search", this.data);
    },
    onSearchItemss(val, v) {
      if (this.data.name === "") {
        this.$emit("search", this.data);
      } else {
      }
    },
    onSearchItems(val, v) {
      if (this.data.name === "") {
      } else {
        this.$emit("search", this.data);
      }
    },
  },
};
</script>
